<template>
	<!-- 对话框表单 -->
	<el-dialog class="ba-operate-dialog" :close-on-click-modal="false" :model-value="baTable.form.operate ? true : false" @close="baTable.toggleForm">
		<template #header>
			<div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
				{{ baTable.form.operate == "add" ? "添加" : "编辑" }}
			</div>
		</template>
		<el-scrollbar v-loading="baTable.form.loading" class="ba-table-form-scrollbar">
			<div
				class="ba-operate-form"
				:class="'ba-' + baTable.form.operate + '-form'"
				:style="'width: calc(100% - ' + baTable.form.labelWidth! / 2 + 'px)'"
			>
				<el-form
					ref="formRef"
					@keyup.enter="baTable.onSubmit(formRef)"
					:model="baTable.form.items"
					label-position="right"
					:label-width="baTable.form.labelWidth + 'px'"
					:rules="rules"
					v-if="!baTable.form.loading"
				>
					<FormItem label="直播间ID" prop="room_id" v-model="baTable.form.items!.room_id" type="string" placeholder="直播间ID" />
					<FormItem label="直播间地址" prop="link" v-model="baTable.form.items!.link" type="string" placeholder="请输入标题" />
					<FormItem label="标题" prop="title" v-model="baTable.form.items!.title" type="string" placeholder="请输入标题" />
					<FormItem
						label="观看时长"
						prop="watch_time"
						v-model.number="baTable.form.items!.watch_time"
						type="number"
						placeholder="请输入观看时长"
					/>
					<FormItem
						label="发放红包数量"
						prop="total"
						v-model.number="baTable.form.items!.total"
						type="number"
						placeholder="请输入红包数量"
					/>
					<el-form-item label="消费红包">
						<el-button type="success" @click="add">增加</el-button>
						<el-table :data="tableData" style="width: 100%">
							<el-table-column prop="date" label="消费满足" width="180">
								<template #default="scope">
									<el-input-number
										v-model="tableData[scope.$index].expend"
										:precision="2"
										controls-position="right"
										style="width: 150px"
										placeholder="消费满足"
									/>
								</template>
							</el-table-column>
							<el-table-column prop="name" label="红包金额" width="180">
								<template #default="scope">
									<el-input-number
										v-model="tableData[scope.$index].amount"
										:precision="2"
										controls-position="right"
										style="width: 150px"
										placeholder="红包金额"
									/>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="180">
								<template #default="scope">
									<el-button type="danger" @click="remove(scope.$index)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-form-item>

					<FormItem
						label="状态"
						v-model="baTable.form.items!.status"
						type="radio"
						:data="{ content: { '0': '禁用', '1': '启用' }, childrenAttr: { border: true } }"
					/>
				</el-form>
			</div>
		</el-scrollbar>
		<template #footer>
			<div :style="'width: calc(100% - ' + baTable.form.labelWidth! / 1.8 + 'px)'">
				<el-button @click="baTable.toggleForm('')">取消</el-button>
				<el-button v-blur :loading="baTable.form.submitLoading" @click="baTable.onSubmit(formRef)" type="primary">
					{{ baTable.form.operateIds && baTable.form.operateIds.length > 1 ? "保存并编辑下一项" : "保存" }}
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, inject, watch } from "vue"
import type baTableClass from "/@/utils/baTable"
import {ElForm, ElNotification, FormItemRule} from "element-plus"
import FormItem from "/@/components/formItem/index.vue"
import { buildValidatorData } from "/@/utils/validate"

const formRef = ref<InstanceType<typeof ElForm>>()
const baTable = inject("baTable") as baTableClass
const rules: Partial<Record<string, FormItemRule[]>> = reactive({
	room_id: [buildValidatorData({ name: "required", title: "直播间ID" })],
	title: [buildValidatorData({ name: "required", title: "标题" })],
	link: [buildValidatorData({ name: "required", title: "直播间地址" })],
	total: [buildValidatorData({ name: "required", title: "发放红包数量" })],
	watch_time: [buildValidatorData({ name: "required", title: "观看时长" })]
})

const tableData = ref([{
	expend: 0.0,
	amount: 0.0
}])

const add = () => {
	if (tableData.value.length > 0) {
		if (tableData.value[tableData.value.length - 1].amount <= 0) {
			ElNotification({
				type: 'error',
				message: "请输入正确的金额",
			})
			return
		}
	}
	tableData.value.push({
		expend: 0.0,
		amount: 0.0
	})
}

const remove = (index: number) => {
	tableData.value.splice(index, 1)
}

baTable.after.requestEdit = (data) => {
	if (baTable.form.items!.rule) {
		tableData.value = JSON.parse(baTable.form.items!.rule)
	} else {
		tableData.value = []
	}
}

baTable.before.onSubmit = (data) => {
	baTable.form.items!.rule = JSON.stringify(tableData.value)
}

watch(
	() => baTable.form.operate,
	(newVal) => {}
)
</script>

<style scoped lang="scss">
.avatar-uploader {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	border-radius: var(--el-border-radius-small);
	box-shadow: var(--el-box-shadow-light);
	border: 1px dashed var(--el-border-color);
	cursor: pointer;
	overflow: hidden;
	width: 110px;
	height: 110px;
}

.avatar-uploader:hover {
	border-color: var(--el-color-primary);
}

.avatar {
	width: 110px;
	height: 110px;
	display: block;
}

.image-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
</style>
